<template>
  <div class="countyApply" v-loading="listLoading">
    <el-form :inline="true" :model="demo" label-width="200px">
      <div class="maintitle">测绘单位信息</div>
      <div class="formcontent">
        <div class="basicInformation">
          <span>项目名称：{{ projCheckData.name }}</span>
          <span>项目编号：{{ projCheckData.number }}</span>
          <span>项目级别：{{ projCheckData.level == 0 ? "市级" : "区县级" }}</span>
          <span>项目年度：{{ projCheckData.year }}</span>
        </div>
        <div class="basicInformation">
          <span>所属区县：{{ projCheckData.district }}</span>
          <span>乡镇：{{ projCheckData.countryside }}</span>
          <span>行政村：{{ projCheckData.village }}</span>
        </div>
        <div class="basicInformation">
          <span v-if="projCheckData.type == 0">项目类型：一般市级整治</span>
          <span v-if="projCheckData.type == 1">项目类型：蔬菜基地建设</span>
          <span v-if="projCheckData.type == 2">项目类型：市区显共建城乡统筹试点</span>
          <span v-if="projCheckData.type == 3">项目类型：市扶贫</span>
          <span v-if="projCheckData.type == 4">项目类型：生态农业示范区</span>
          <span v-if="projCheckData.type == 5">项目类型：异地代保</span>
          <span v-if="projCheckData.type == 6">项目类型：基本农田示范区</span>
          <span v-if="projCheckData.type == 7">项目类型：国土整治试点</span>
          <span v-if="projCheckData.type == 8">项目类型：标准果园建设</span>
          <span>图幅号：{{ projCheckData.frameNumber }}</span>
          <span>项目工期：{{ projCheckData.duration }}</span>
          <span>投资回收期：{{ projCheckData.recover }}</span>
        </div>
        <div class="basicInformation">
          <!-- <span>高标准基本农田建设条件：暂无</span> -->
          <span>
            是否属于高标准基本农田项目：{{
            projCheckData.isStandard == 0 ? "是" : "否"
            }}
          </span>
        </div>
      </div>
      <div class="maintitle" style="margin:60px 0 30px 0;">建设信息</div>
      <div>
        <el-form-item label="实际建设总规模">
          <el-input :disabled="disabled" v-model="checkData.totalSize" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际整理规模">
          <el-input :disabled="disabled" v-model="checkData.finishingScale" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际开发规模">
          <el-input :disabled="disabled" v-model="checkData.developmentScale" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="实际复垦规模">
          <el-input :disabled="disabled" v-model="checkData.reclamationScale" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际整新增耕地总面积">
          <el-input
            :disabled="disabled"
            v-model="checkData.arableLandTotalArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="新增水田面积">
          <el-input :disabled="disabled" v-model="checkData.paddyFieldArea" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="新增旱地面积">
          <el-input :disabled="disabled" v-model="checkData.dryLandArea" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际整新增整理耕地面积">
          <el-input
            :disabled="disabled"
            v-model="checkData.arrangeArableLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际整新增开发耕地面积">
          <el-input
            :disabled="disabled"
            v-model="checkData.developArableLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="实际整新增复垦耕地面积">
          <el-input
            :disabled="disabled"
            v-model="checkData.reclamationArableLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际基本农田开发规模">
          <el-input
            :disabled="disabled"
            v-model="checkData.farmlandDevelopScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际可用于占补平衡面积">
          <el-input :disabled="disabled" v-model="checkData.occupyBalanceArea" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="计划建成高标准基本农田规模">
          <el-input
            :disabled="disabled"
            v-model="checkData.basicFarmlandScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="灾毁耕地面积">
          <el-input
            :disabled="disabled"
            v-model="checkData.disasterArableLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="整治前建设用地所占面积">
          <el-input :disabled="disabled" v-model="checkData.beforeArea" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="整治后建设用地所占面积">
          <el-input :disabled="disabled" v-model="checkData.afterArea" style="width:200px;">
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="减少建设用地而增加耕地面积">
          <el-input
            :disabled="disabled"
            v-model="checkData.additionArableLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="灾后恢复耕地面积">
          <el-input
            :disabled="disabled"
            v-model="checkData.restoreArableLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <el-form-item label="整治后耕地面积">
        <el-input :disabled="disabled" v-model="checkData.afterArableLandArea" style="width:200px;">
          <i slot="suffix">公顷</i>
        </el-input>
      </el-form-item>

      <div class="maintitle" style="margin:60px 0 30px 0;">附件信息</div>
      <el-form-item label="竣工验收附件模版" label-width="125px">
        <!-- <el-upload class="upload-demo" action="http://192.168.2.146:8546/renovation/acceptance/apply/upload"> -->
        <!-- :file-list="fileList"
        :on-success="getreport"-->
        <!-- <el-button size="small">下载</el-button>
        </el-upload>-->
        <el-button :v-if="!disabled" @click="handleDownloadTemp" size="small">下载</el-button>
      </el-form-item>
      <div>
        <el-form-item label="竣工验收成果" label-width="125px">
          <el-upload
            v-if="!disabled"
            :action="uploadUrl"
            :file-list="fileList[0]"
            :on-success="getreport"
          >
            <el-button v-if="!disabled" size="small" type="primary">上传</el-button>
            <!-- <el-button @click="seePdf()" v-if="disabled" size="small" type="primary">下载</el-button> -->
          </el-upload>
          <seeFujianForList
            v-if="disabled && fileList[0]"
            @openPdf="seePdf"
            download="1"
            :file-url="$https + (fileList[0].length > 0 ? fileList[0][0].url : '')"
            :file-obj="fileList[0]"
            :file-num="0"
          />
        </el-form-item>
        <div class="btn">
          <el-button v-if="!disabled" type="primary" @click="addSubmit">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </el-form>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//引入requst
import {
  checkConsInfoF,
  addConsInfoF,
  uploadFj,
  getFile
} from "@/api/completionAcceptance/acceptance";
//引入公共方法
import config from "@/config/index.js";
import { formatDateTime } from "@/utils/index";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      uploadUrl: config.uploadUrl,
      value: null,
      value1: null,
      radio: "1",
      demo: null,
      //竣工验收项目相关数据结构
      projCheckData: {
        name: null, //项目名称
        number: null, //项目编号
        district: null, //所属区县
        countryside: null, //所属乡镇
        village: null, //行政村
        year: null, //项目年度
        level: null, //项目级别;0:市级;1:区县级
        type: null, //项目类型
        frameNumber: null, //图幅号
        isStandard: null, //是否属于高标准基本农田项目:0:是;1:否
        duration: null, //项目工期
        recover: null //投资回收期
      },
      //竣工验收提交数据
      // flag:null,//0:暂存;1:提交
      checkData: {
        additionArableLandArea: null, //减少建设用地而增加耕地面积
        afterArableLandArea: null, //整治后耕地面积
        afterArea: null, //整治后建设用地所占面积
        annexId: null, //附件id
        arableLandTotalArea: null, //实际整新增耕地总面积
        arrangeArableLandArea: null, //实际整新增整理耕地面积
        basicFarmlandScale: null, //计划建成高标准基本农田规模
        beforeArea: null, //整治前建设用地所占面积
        developArableLandArea: null, //实际整新增开发耕地面积
        developmentScale: null, //实际开发规模
        disasterArableLandArea: null, //灾毁耕地面积
        dryLandArea: null, //新增旱地面积
        farmlandDevelopScale: null, //实际基本农田开发规
        finishingScale: null, //实际整理规模
        occupyBalanceArea: null, //实际可用于占补平衡面积
        paddyFieldArea: null, //新增水田面积
        reclamationArableLandArea: null, //实际整新增复垦耕地面积
        reclamationScale: null, //实际复垦规模
        restoreArableLandArea: null, //灾后恢复耕地面积
        totalSize: null, //实际建设总规模
        annexInfo: null
      },
      //验收日期
      time: {
        startTime: null,
        endTime: null
      },
      disabled: true,
      projectId: localStorage.getItem("projectId") || "",
      listLoading: false, //加载效果
      fileList: [],
      pdfUrl: "",
      pdfFlag: false,
      pdfName: ""
    };
  },
  //初始化数据
  created() {},
  mounted() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    this.getCheckInfo();
  },
  methods: {
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    },
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    //查询实际建设信息以及项目信息
    getCheckInfo() {
      this.listLoading = true;
      let data = {
        projectId: this.projectId
      };
      checkConsInfoF(data)
        .then(res => {
          if (res.code == 1000 && res.data) {
            //成功
            this.listLoading = false;
            this.projCheckData = res.data.projectInfoDTO; //赋值项目基本数据
            this.checkData = res.data.actualConstructionInformationInfoDTO; //赋值验收人员基本数据
            var data1 = {
              fileId: res.data.actualConstructionInformationInfoDTO.annexId
            };
            getFile(data1).then(res1 => {
              console.log(res1, "文件信息");
              this.fileList = [
                [{ name: res1.data.fileName, url: res1.data.filePath }]
              ];
            });
            // //赋值时间戳
            // if(res.data.completionAcceptanceInfoDTO.beginTime !== null){//开始时间
            //   this.time.startTime = new Date(res.data.completionAcceptanceInfoDTO.beginTime).getTime();//转换时间戳
            // }
            // if(res.data.completionAcceptanceInfoDTO.endTime !== null){
            //   this.time.endTime = new Date(res.data.completionAcceptanceInfoDTO.endTime).getTime();//转换时间戳
            // }
            // //转为字符串
            // if(res.data.completionAcceptanceInfoDTO.ending !== null){
            //   this.checkData.ending = res.data.completionAcceptanceInfoDTO.ending.toString();
            // }
          }
        })
        .catch(err => {
          this.listLoading = false;
          console.log("报错", err);
        });
    },
    //添加添加实际建设信息
    addSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let data = {};
      //循环验证是否为空
      for (let i in this.checkData) {
        if (this.checkData[i] == null) {
          delete this.checkData[i];
        }
      }
      data = this.checkData;
      data.projectId = this.projectId;
      data.flag = 1; //提交
      for (const key in data) {
        data[key] = data[key] * 1;
      }
      addConsInfoF(data)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功",
            type: "success"
          });
          // this.getCheckInfo();
          this.$router.push(
            "/projectManagement/projectImplementation/dealwith"
          );
        })
        .catch(err => {
          // console.log("报错", err);
          loading.close();
        });
    },
    //上传文件
    getreport(res, file, fileList) {
      if (res.msg.indexOf("认证失败") !== -1) {
        return this.$message({
          message: "认证失败，重新上传",
          type: "error"
        });
      }
      //赋值附件id
      this.checkData.annexId = res.data.id;
      this.checkData.annexInfo = res.data.annexInfo;
    },
    handleDownloadTemp: function() {
      //下载竣工验收附件模版
      let a = document.createElement("a");
      a.href = config.baseUrl + "/renovation/templatefile/竣工验收上传数据.zip";
      a.target = "_blank";
      a.click();
    },
    changTime() {
      if (this.time.startTime !== null) {
        this.checkData.beginTime = this.time.startTime + " " + "00:00:00"; //2019-11-12 2:00:9转换格式
      } else {
        this.checkData.beginTime = null; //初始化数据
      }
      if (this.time.endTime !== null) {
        this.checkData.endTime = this.time.endTime + " " + "00:00:00"; //2019-11-12 2:00:9转换格式
      } else {
        this.checkData.endTime = null; //初始化数据
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.countyApply {
  padding: 20px;
  min-height: calc(100vh - 154px);
  background-color: #fff;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .formcontent {
    margin-top: 30px;
    .basicInformation {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #8c8c8c;
      margin-bottom: 20px;
      span {
        margin-right: 60px;
      }
    }
  }
}
</style>
